<template>
  <div>
    <el-row>
      <el-col :span="24" class="pad-all-10">
        <div class="col-container">
          <el-form-item label="发布 Topic" >
            <CommandStreamTag :stream-str-info="mqttPubTopicInfo.mqttPubTopicStr" :stream-tags="mqttPubTopicInfo.mqttPubTopicTagData"
                              @clickCommandTag="clickHttpParamTag"></CommandStreamTag>
          </el-form-item>
          <el-form-item label="Qos">
            <el-radio-group v-model="baseSetting.mqttPubQos" class="width-100" @change="forceUpdates">
              <el-radio :label="func.value" :key="idx" v-for="(func, idx) in commonConfig.mqttQos">{{func.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="PayloadType">
            <el-select v-model="baseSetting.mqttPayloadType" clearable filterable class="width-100"
                       placeholder="请选择消息格式" @change="forceUpdates">
              <el-option :label="type.label" :value="type.value" :key="idx"
                         v-for="(type, idx) in commonConfig.mqttContentType"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="Payload">
            <EnumDynamic v-if="baseSetting.mqttPayloadType === commonConfig.mqttContentType[0].value" title="Payload"
                         :isValueStream="true" :dynamic-data="mqttPayload" @clickCommandTag="clickHttpParamTag">
            </EnumDynamic>
            <CommandStreamTag v-if="[commonConfig.mqttContentType[1].value,commonConfig.mqttContentType[2].value].includes(baseSetting.mqttPayloadType )"
                              input-type="textarea" :stream-str-info="mqttPayloadInfo.mqttPayloadStr"
                              :stream-tags="mqttPayloadInfo.mqttPayloadTagData"
                              @clickCommandTag="clickHttpParamTag"></CommandStreamTag>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="24" class="pad-all-10">
        <div class="col-container">
          <el-form-item label="订阅 Topic">
            <CommandStreamTag :stream-str-info="mqttSubTopicInfo.mqttSubTopicStr" :stream-tags="mqttSubTopicInfo.mqttSubTopicTagData"
                              @clickCommandTag="clickHttpParamTag"></CommandStreamTag>
          </el-form-item>
          <el-form-item label="Qos">
            <el-radio-group v-model="baseSetting.mqttSubQos" class="width-100" @change="forceUpdates">
              <el-radio :label="func.value" :key="idx" v-for="(func, idx) in commonConfig.mqttQos">{{func.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="ResponseType">
            <el-select v-model="baseSetting.mqttResponseType" clearable filterable class="width-100"
                       placeholder="请选择消息格式" @change="forceUpdates">
              <el-option :label="type.label" :value="type.value" :key="idx"
                         v-for="(type, idx) in commonConfig.mqttContentType"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Response">
            <EnumDynamic v-if="baseSetting.mqttResponseType === commonConfig.mqttContentType[0].value" title="Rsp"
                         :isValueStream="true" :dynamic-data="mqttResponse" @clickCommandTag="clickHttpParamTag">
            </EnumDynamic>
            <CommandStreamTag v-if="[commonConfig.mqttContentType[1].value,commonConfig.mqttContentType[2].value].includes(baseSetting.mqttResponseType )"
                              input-type="textarea" :stream-str-info="mqttResponseInfo.mqttResponseStr"
                              :stream-tags="mqttResponseInfo.mqttResponseTagData" @clickCommandTag="clickHttpParamTag">
            </CommandStreamTag>
          </el-form-item>
        </div>
      </el-col>
    </el-row>

</div>
</template>

<script>
  import {commonConfig} from "@/config/common";

  import EnumDynamic from "../../../../components/EnumDynamic";
  import CommandStreamTag from '../../../../components/CommandStreamTag';

  export default {
    name: "MqttSetting",
    components: {
      EnumDynamic, CommandStreamTag
    },
    props: {
      baseSetting: {
        default: () => {
          return {
            mqttPubQos: 1,
            mqttSubQos: 1,
            mqttPayloadType:commonConfig.mqttContentType[0].value,
            mqttResponseType:commonConfig.mqttContentType[0].value,
          }
        }
      },
      mqttSubTopicInfo: {
        default: () => {
          return {
            mqttSubTopicStr: {
              identify: 'Url',
              value: '',
              size: 'medium',
              placeholder: ''
            },
            mqttSubTopicTagData: [],
          }
        }
      },
      mqttPubTopicInfo: {
        default: () => {
          return {
            mqttPubTopicStr: {
              identify: 'Url',
              value: '',
              size: 'medium',
              placeholder: ''
            },
            mqttPubTopicTagData: [],
          }
        }
      },
      // application/json 情况
      mqttPayload: {
        default: () => {
          return []
        }
      },
      mqttResponse: {
        default: () => {
          return []
        }
      },
      // http text/html 情况
      mqttPayloadInfo: {
        default: () => {
          return {
            mqttPayloadStr: {
              identify: 'Content',
              value: '',
              size: 'medium',
              placeholder: 'Payload xml'
            },
            mqttPayloadTagData: [],
          }
        }
      },
      mqttResponseInfo: {
        default: () => {
          return {
            mqttResponseStr: {
              identify: 'Rsp',
              value: '',
              size: 'medium',
              placeholder: 'response xml'
            },
            mqttResponseTagData: [],
          }
        }
      },

      // 模流模板校验相关
      genCommInfo: {
        default: () => {
          return {}
        }
      },
      decodeFunc: {
        default: () => {
          return ''
        }
      },
      encodeFunc: {
        default: () => {
          return ''
        }
      },
    },
    data() {
      const checkJson = (rule, value, callback) => {
        try {
          JSON.parse(value);
        } catch (e) {
          console.log("json 格式错误")
          callback(new Error('json格式错误'));
        }
        callback()
      }
      return {
        commonConfig: commonConfig,
        showCommValDialog: false,
        commValFormLoading: false,
        commValFormStructure: [],
        commValForm: {contentValue: ''},
        commValFormRules: {
          contentValue: [
            {validator: checkJson, message: "请输入正确的json格式且不能为空", trigger: "blur"}
          ],
        },
        commValParams: {},
        commValParamSchema: {},
        genCommData: [],
        analyzeFuncData: [],

        validateType: '',
        stream: {
          uri: '',
          method: '',
          contentType: '',
          header: {},
          content: {},
          response: {},
        },
        customFunc: '',
        // contentValue: '', // decode 输入的 content
        valResult: '',
        encodeFuncT: '',
        decodeFuncT: '',
        commValFormRef: ''

      }
    },
    created() {
      this.getGenCommData();
      this.getAnalyzeFuncData();
    },
    methods: {
      forceUpdates() {
        this.$forceUpdate()
      },
      clickHttpParamTag(type = '', tag = {}) {
        this.$emit('clickHttpParamTag', type, tag);
      },
      getGenCommData() {
        API.genCommand.genCommAll().then(result => {
          const {data = []} = result;
          this.genCommData = data;
        }).catch(err => {
          console.log('err', err)
        });
      },
      getAnalyzeFuncData() {
        API.analyzeFunc.analyzeFuncList({pageNo: 1, pageSize: 1000}).then(result => {
          const {data = []} = result;
          this.analyzeFuncData = data;
        }).catch(err => {
          console.log('err', err)
        });
      },
    },
  }
</script>

<style scoped>
  .col-container {
    border-radius: 8px;
    background: #fafafa;
    padding: 15px;
  }
</style>
